import "package:craze/common/index.dart";
import "package:craze/models/question_model.dart";
import "package:craze/models/user_model.dart";
import "package:craze/models/video_model.dart";
import "package:craze/services/index.dart";
import "package:craze/services/service_locator.dart";
import "package:craze/services/user_service.dart";
import "package:craze/stores/question_store.dart";
import "package:craze/stores/video_store.dart";
import "package:flutter/material.dart";
import "package:flutter_mobx/flutter_mobx.dart";
import "package:flutter_screenutil/flutter_screenutil.dart";
import "package:go_router/go_router.dart";
import "package:google_fonts/google_fonts.dart";
import "package:shimmer/shimmer.dart";

class BookView extends StatefulWidget {
  const BookView({super.key});

  @override
  State<BookView> createState() => _BookViewState();
}

class _BookViewState extends State<BookView> {
  // 滚动控制器
  final ScrollController _controller1 = ScrollController();
  final ScrollController _controller2 = ScrollController();

  // 获取store
  final QuestionStore _questionStore = getIt<QuestionStore>();
  final VideoStore _videoStore = getIt<VideoStore>();
  // 添加UserService以获取用户信息
  final UserService _userService = getIt<UserService>();

  // 缓存用户头像，避免重复获取
  final Map<String, String> _userAvatarCache = {};

  @override
  void initState() {
    super.initState();

    // 初始化时设置第二行的初始位置，使两行错开
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (_controller2.hasClients) {
        _controller2.jumpTo(150.w);
      }

      // 启动自动滚动
      _startAutoScroll();

      // 确保页面先渲染完成，再加载数据，这样骨架屏能够显示
      _loadData();
    });
  }

  // 获取问题提问者的头像
  String _getUserAvatar(String userId) {
    if (_userAvatarCache.containsKey(userId)) {
      return _userAvatarCache[userId]!;
    }

    final user = _userService.getUserById(userId);
    final avatar = user?.avatar ?? 'assets/images/touxiang1.png'; // 默认头像

    // 缓存头像
    _userAvatarCache[userId] = avatar;
    return avatar;
  }

  // 加载数据
  Future<void> _loadData() async {
    // 确保数据加载前重置loading状态
    _questionStore.isLoading = true;
    _videoStore.isLoading = true;

    // 更长的延迟以便观察骨架屏效果
    await Future.delayed(const Duration(seconds: 1));

    // 加载问题数据
    await _questionStore.loadQuestions();

    // 加载完问题后等待一会儿再加载视频，这样可以分别观察两个骨架屏
    await Future.delayed(const Duration(seconds: 1));

    // 加载视频数据
    await _videoStore.loadVideos();
  }

  @override
  void dispose() {
    _controller1.dispose();
    _controller2.dispose();
    super.dispose();
  }

  // 自动滚动方法
  void _startAutoScroll() {
    Future.delayed(const Duration(milliseconds: 50), () {
      if (!mounted) return;

      // 第一行慢速滚动
      if (_controller1.hasClients) {
        double newPosition = _controller1.offset + 0.5;
        if (newPosition >= _controller1.position.maxScrollExtent) {
          newPosition = 0;
        }
        _controller1.jumpTo(newPosition);
      }

      // 第二行快速滚动
      if (_controller2.hasClients) {
        double newPosition = _controller2.offset + 0.7;
        if (newPosition >= _controller2.position.maxScrollExtent) {
          newPosition = 0;
        }
        _controller2.jumpTo(newPosition);
      }

      // 持续滚动
      _startAutoScroll();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 1.sh,
        width: 1.sw,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(MyImages.commonBg),
            fit: BoxFit.cover,
          ),
        ),
        child: SafeArea(
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 20.w),
                  child: Text(
                    'Theoretical knowledge',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 22.sp,
                      fontFamily: GoogleFonts.mochiyPopOne().fontFamily,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                ),
                SizedBox(height: 20.h),
                // 知识列表
                Padding(
                  padding: EdgeInsets.only(left: 20.w),
                  child: SizedBox(
                    height: 220.h,
                    width: 1.sw,
                    child: Stack(
                      clipBehavior: Clip.none,
                      children: [
                        // 第三个卡片
                        Transform.translate(
                          offset: Offset(286.w, -10.h),
                          child: Transform.scale(
                            scale: 0.8,
                            child: AspectRatio(
                              aspectRatio: 134 / 180,
                              child: GestureDetector(
                                onTap: () {
                                  GoRouter.of(
                                    context,
                                  ).push(AppRouter.knowledgeDetailThree);
                                },
                                child: Container(
                                  transform:
                                      Matrix4.identity()
                                        ..translate(0.0, 0.0)
                                        ..rotateZ(0.29),
                                  clipBehavior: Clip.antiAlias,
                                  decoration: ShapeDecoration(
                                    color: const Color(0xFF121325),
                                    shape: RoundedRectangleBorder(
                                      side: BorderSide(
                                        width: 1,
                                        color: const Color(0xFF0076FF),
                                      ),
                                      borderRadius: BorderRadius.only(
                                        topLeft: Radius.circular(12.r),
                                        topRight: Radius.circular(30.r),
                                        bottomLeft: Radius.circular(12.r),
                                        bottomRight: Radius.circular(12.r),
                                      ),
                                    ),
                                  ),
                                  child: Stack(
                                    children: [
                                      Positioned(
                                        bottom: -20.h,
                                        right: -10.w,
                                        child: Transform.rotate(
                                          angle: -0.29,
                                          child: Image.asset(
                                            MyImages.knowledge3Bg,
                                            fit: BoxFit.contain,
                                            width: 171.w,
                                            height: 171.w,
                                          ),
                                        ),
                                      ),

                                      // 问题 3
                                      Positioned(
                                        top: 16.h,
                                        left: 28.w,
                                        child: Container(
                                          constraints: BoxConstraints(
                                            maxWidth: 108.28.w,
                                          ),
                                          child: Transform(
                                            transform:
                                                Matrix4.identity()
                                                  ..translate(0.0, 0.0)
                                                  ..rotateZ(-0.02),
                                            child: Text(
                                              'The basics of diving safety',
                                              style: TextStyle(
                                                color: Colors.white.withAlpha(
                                                  230,
                                                ),
                                                fontSize: 19.sp,
                                                fontFamily:
                                                    GoogleFonts.mochiyPopOne()
                                                        .fontFamily,
                                                fontWeight: FontWeight.w400,
                                                height: 1.60,
                                              ),
                                            ),
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),

                        // 第二个卡片
                        Transform.translate(
                          offset: Offset(156.w, -10.h),
                          child: Transform.scale(
                            scale: 0.85,
                            child: AspectRatio(
                              aspectRatio: 148 / 186,
                              child: GestureDetector(
                                onTap: () {
                                  print("Tapped on second card");
                                  GoRouter.of(
                                    context,
                                  ).push(AppRouter.knowledgeDetailTwo);
                                },
                                child: Container(
                                  transform:
                                      Matrix4.identity()
                                        ..translate(0.0, 0.0)
                                        ..rotateZ(0.16),
                                  clipBehavior: Clip.antiAlias,
                                  decoration: ShapeDecoration(
                                    color: const Color(0xFF121325),
                                    shape: RoundedRectangleBorder(
                                      side: BorderSide(
                                        width: 1.w,
                                        color: const Color(0xFF0076FF),
                                      ),
                                      borderRadius: BorderRadius.only(
                                        topLeft: Radius.circular(12.r),
                                        topRight: Radius.circular(30.r),
                                        bottomLeft: Radius.circular(12.r),
                                        bottomRight: Radius.circular(12.r),
                                      ),
                                    ),
                                  ),
                                  child: Stack(
                                    children: [
                                      Positioned(
                                        bottom: -10.h,
                                        right: -0.w,
                                        child: Image.asset(
                                          MyImages.knowledge2Bg,
                                          fit: BoxFit.contain,
                                          width: 165.28.w,
                                          height: 165.28.w,
                                        ),
                                      ),

                                      // 问题 2
                                      Positioned(
                                        top: 12.h,
                                        left: 28.w,
                                        child: Container(
                                          constraints: BoxConstraints(
                                            maxWidth: 104.23.w,
                                          ),
                                          child: Text(
                                            'Safety precautions during diving',
                                            style: TextStyle(
                                              color: Colors.white.withAlpha(
                                                230,
                                              ),
                                              fontSize: 19.sp,
                                              fontFamily:
                                                  GoogleFonts.mochiyPopOne()
                                                      .fontFamily,
                                              fontWeight: FontWeight.w400,
                                            ),
                                          ),
                                        ),
                                      ),

                                      // 星星
                                      Positioned(
                                        top: 20.h,
                                        right: 7.w,
                                        child: Image.asset(
                                          MyImages.star2,
                                          fit: BoxFit.contain,
                                          width: 40.w,
                                          height: 30.w,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),

                        // 第一个卡片
                        GestureDetector(
                          onTap: () {
                            print("Tapped on first card");
                            GoRouter.of(
                              context,
                            ).push(AppRouter.knowledgeDetailOne);
                          },
                          child: AspectRatio(
                            aspectRatio: 172 / 220,
                            child: Container(
                              clipBehavior: Clip.antiAlias,
                              decoration: ShapeDecoration(
                                gradient: LinearGradient(
                                  begin: Alignment(0.50, 0.00),
                                  end: Alignment(0.50, 0.86),
                                  colors: [
                                    const Color(0xFF0076FF),
                                    const Color(0xFF045EC6),
                                  ],
                                ),
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.only(
                                    topLeft: Radius.circular(12.r),
                                    topRight: Radius.circular(30.r),
                                    bottomLeft: Radius.circular(12.r),
                                    bottomRight: Radius.circular(12.r),
                                  ),
                                ),
                              ),
                              child: Stack(
                                children: [
                                  Positioned(
                                    bottom: -10.h,
                                    right: -0.w,
                                    child: Image.asset(
                                      MyImages.knowledge1Bg,
                                      fit: BoxFit.contain,
                                      width: 172.w,
                                      height: 172.w,
                                    ),
                                  ),

                                  // 问题 1
                                  Positioned(
                                    top: 12.h,
                                    left: 14.w,
                                    child: Container(
                                      constraints: BoxConstraints(
                                        maxWidth: 120.w,
                                      ),
                                      child: Text(
                                        'The basics of diving？',
                                        style: TextStyle(
                                          color: Colors.white.withAlpha(230),
                                          fontSize: 15.sp,
                                          fontFamily:
                                              GoogleFonts.mochiyPopOne()
                                                  .fontFamily,
                                          fontWeight: FontWeight.w400,
                                        ),
                                      ),
                                    ),
                                  ),

                                  // 描述
                                  Positioned(
                                    top: 72.h,
                                    left: 14.w,
                                    child: Container(
                                      constraints: BoxConstraints(
                                        maxWidth: 144.w,
                                      ),
                                      child: Text(
                                        'Water pressure and body changes, buoyancy and neutral buoyancy.',
                                        style: TextStyle(
                                          color: Colors.white.withAlpha(190),
                                          fontSize: 14.sp,
                                          fontFamily:
                                              GoogleFonts.inter().fontFamily,
                                          fontWeight: FontWeight.w500,
                                          height: 1.50,
                                        ),
                                      ),
                                    ),
                                  ),

                                  // 查看按钮
                                  Positioned(
                                    top: 156.8.h,
                                    left: 3.w,
                                    child: Image.asset(
                                      MyImages.knowledgeDetail,
                                      fit: BoxFit.contain,
                                      width: 145.w,
                                      height: 55.45.w,
                                    ),
                                  ),

                                  // 星星
                                  Positioned(
                                    top: 30.h,
                                    right: 7.w,
                                    child: Image.asset(
                                      MyImages.star1,
                                      fit: BoxFit.contain,
                                      width: 35.w,
                                      height: 23.w,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),

                SizedBox(height: 28.h),

                // 标题
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 20.w),
                  child: Text(
                    'Online Q&A',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 22.sp,
                      fontFamily: GoogleFonts.mochiyPopOne().fontFamily,
                      fontWeight: FontWeight.w400,
                      height: 1.0,
                    ),
                  ),
                ),

                // 问答弹幕
                Observer(
                  builder: (_) {
                    if (_questionStore.isLoading) {
                      return _buildQuestionShimmer();
                    }

                    return _buildQuestionList();
                  },
                ),

                SizedBox(height: 28.h),

                // 标题
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 20.w),
                  child: Text(
                    'Diving tutorial',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 22.sp,
                      fontFamily: GoogleFonts.mochiyPopOne().fontFamily,
                      fontWeight: FontWeight.w400,
                      height: 1.0,
                    ),
                  ),
                ),

                // 视频列表(两列)
                SizedBox(height: 16.h),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 20.w),
                  child: Observer(
                    builder: (_) {
                      if (_videoStore.isLoading) {
                        return _buildVideoShimmer();
                      }

                      return _buildVideoGrid();
                    },
                  ),
                ),

                SizedBox(height: 30.h),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildQuestionList() {
    // 将问题列表分成两部分，以便在两行中显示
    final allQuestions = _questionStore.questions;

    // 如果问题数量不足，确保至少有两行
    if (allQuestions.isEmpty) {
      return SizedBox(height: 112.h);
    }

    // 分成两行，每行显示一半的问题
    final halfLength = (allQuestions.length / 2).ceil();
    final questions1 = allQuestions.sublist(0, halfLength);
    final questions2 =
        allQuestions.length > halfLength
            ? allQuestions.sublist(halfLength)
            : allQuestions.sublist(0, halfLength);

    return Padding(
      padding: EdgeInsets.only(top: 15.h),
      child: Column(
        children: [
          // 第一行
          SizedBox(
            height: 46.h,
            child: ListView.builder(
              controller: _controller1,
              scrollDirection: Axis.horizontal,
              physics: const NeverScrollableScrollPhysics(),
              itemCount: questions1.length,
              itemBuilder: (context, index) {
                final question = questions1[index];
                return Padding(
                  padding: EdgeInsets.only(
                    right: 20.w,
                    left: index == 0 ? 20.w : 0,
                  ),
                  child:
                      question.isHot
                          ? _buildQuestion1(question)
                          : _buildQuestion2(question),
                );
              },
            ),
          ),

          SizedBox(height: 16.h),

          // 第二行
          SizedBox(
            height: 46.h,
            child: ListView.builder(
              controller: _controller2,
              scrollDirection: Axis.horizontal,
              physics: const NeverScrollableScrollPhysics(),
              itemCount: questions2.length,
              itemBuilder: (context, index) {
                final question = questions2[index];
                return Padding(
                  padding: EdgeInsets.only(
                    right: 20.w,
                    left: index == 0 ? 20.w : 0,
                  ),
                  child:
                      question.isHot
                          ? _buildQuestion1(question)
                          : _buildQuestion2(question),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildQuestion1(QuestionModel question) {
    return GestureDetector(
      onTap: () {
        _questionStore.selectQuestion(question.id);
        GoRouter.of(context).push('/answer');
      },
      child: Container(
        width: 296.w,
        height: 46.h,
        decoration: ShapeDecoration(
          gradient: LinearGradient(
            begin: Alignment(0.50, 0.00),
            end: Alignment(0.50, 0.86),
            colors: [const Color(0xFF0076FF), const Color(0xFF045EC6)],
          ),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(40.r),
          ),
        ),
        child: Row(
          children: [
            SizedBox(width: 3.w),
            // 修改为显示提问者头像，并添加点击跳转逻辑
            GestureDetector(
              onTap: () {
                // 阻止事件冒泡，使用 behavior 属性
                // 跳转到用户个人资料页面，使用 AppRouter 中定义的路由常量
                GoRouter.of(context).push(
                  AppRouter.otherProfile,
                  extra: {'userId': question.userId},
                );
              },
              behavior: HitTestBehavior.opaque, // 防止点击事件穿透
              child: CircleAvatar(
                backgroundImage: AssetImage(_getUserAvatar(question.userId)),
                radius: 20.r,
              ),
            ),
            SizedBox(width: 4.w),
            // 问题
            Expanded(
              child: Container(
                constraints: BoxConstraints(maxWidth: 150.w),
                child: Text(
                  '${question.content}${question.isHot ? ' 🔥' : ''}',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 10.sp,
                    fontFamily: GoogleFonts.mochiyPopOne().fontFamily,
                    fontWeight: FontWeight.w400,
                    height: 1.70,
                    overflow: TextOverflow.ellipsis,
                  ),
                  maxLines: 2,
                ),
              ),
            ),

            // 回答按钮
            Padding(
              padding: EdgeInsets.only(top: 3.h),
              child: Image.asset(
                MyImages.answer,
                fit: BoxFit.contain,
                width: 90.w,
                height: 35.w,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildQuestion2(QuestionModel question) {
    return GestureDetector(
      onTap: () {
        _questionStore.selectQuestion(question.id);
        GoRouter.of(context).push('/answer');
      },
      child: Container(
        width: 296.w,
        height: 46.h,
        decoration: ShapeDecoration(
          color: const Color(0xFF1E1F31),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(40.r),
          ),
        ),
        child: Row(
          children: [
            SizedBox(width: 3.w),
            // 修改为显示提问者头像，并添加点击跳转逻辑
            GestureDetector(
              onTap: () {
                // 阻止事件冒泡，使用 behavior 属性
                // 跳转到用户个人资料页面，使用 AppRouter 中定义的路由常量
                GoRouter.of(context).push(
                  AppRouter.otherProfile,
                  extra: {'userId': question.userId},
                );
              },
              behavior: HitTestBehavior.opaque, // 防止点击事件穿透
              child: CircleAvatar(
                backgroundImage: AssetImage(_getUserAvatar(question.userId)),
                radius: 20.r,
              ),
            ),
            SizedBox(width: 4.w),
            // 问题
            Expanded(
              child: Container(
                constraints: BoxConstraints(maxWidth: 150.w),
                child: Text(
                  question.content,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 10.sp,
                    fontFamily: GoogleFonts.mochiyPopOne().fontFamily,
                    fontWeight: FontWeight.w400,
                    height: 1.70,
                    overflow: TextOverflow.ellipsis,
                  ),
                  maxLines: 2,
                ),
              ),
            ),

            // 回答按钮
            Padding(
              padding: EdgeInsets.only(top: 3.h),
              child: Image.asset(
                MyImages.answer,
                fit: BoxFit.contain,
                width: 90.w,
                height: 35.w,
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 视频网格
  Widget _buildVideoGrid() {
    // 使用videoStore中的视频数据
    final videos = _videoStore.videos;

    if (videos.isEmpty) {
      return Center(
        child: Text(
          'No videos available',
          style: TextStyle(color: Colors.white),
        ),
      );
    }

    return GridView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2, // 两列
        childAspectRatio: 183 / 268, // 宽高比
        crossAxisSpacing: 15.w, // 水平间距
        mainAxisSpacing: 15.h, // 垂直间距
      ),
      itemCount: videos.length,
      itemBuilder: (context, index) {
        return _buildVideoCard(videos[index]);
      },
    );
  }

  // 视频卡片
  Widget _buildVideoCard(VideoModel video) {
    return GestureDetector(
      onTap: () {
        _videoStore.selectVideo(video.id);
        GoRouter.of(context).push('/video');
      },
      child: Container(
        decoration: BoxDecoration(
          color: const Color(0xFF121325),
          borderRadius: BorderRadius.circular(12.r),
          boxShadow: [
            BoxShadow(
              color: MyColors.cardDark,
              blurRadius: 10,
              offset: const Offset(0, 4),
            ),
          ],
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 缩略图
            Padding(
              padding: EdgeInsets.all(8.w),
              child: ClipRRect(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(12.r),
                  topRight: Radius.circular(12.r),
                ),
                child: AspectRatio(
                  aspectRatio: 167 / 186,
                  child: Stack(
                    fit: StackFit.expand,
                    children: [
                      // 缩略图 - 使用视频的缩略图或默认图片
                      Image.asset(
                        video.thumbnailUrl,
                        fit: BoxFit.cover,
                        errorBuilder: (context, error, stackTrace) {
                          return Image.asset(
                            MyImages.startBg,
                            fit: BoxFit.cover,
                          );
                        },
                      ),

                      // 播放按钮
                      Center(
                        child: Container(
                          width: 30.w,
                          height: 30.w,
                          decoration: BoxDecoration(
                            color: Colors.black.withAlpha(100),
                            shape: BoxShape.circle,
                          ),
                          child: Icon(
                            Icons.play_arrow,
                            color: Colors.white,
                            size: 20.sp,
                          ),
                        ),
                      ),

                      // 举报图标
                      Positioned(
                        top: 10.h,
                        right: 10.w,
                        child: GestureDetector(
                          onTap: () async {
                            final result = await ReportDialog.show(
                              context,
                              title: 'Report',
                              description:
                                  'Please select a reason for reporting this video.',
                              onSubmit: (type) async {
                                // block 也算举报成功
                                MyToast.showSuccess(
                                  context,
                                  'Report successful',
                                );
                                await getIt<VideoService>().deleteVideo(
                                  video.id,
                                );
                                await _videoStore.loadVideos();
                              },
                            );
                          },
                          child: Icon(
                            MyIcons.iconReport,
                            color: Colors.white,
                            size: 25.sp,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),

            // 视频标题
            Padding(
              padding: EdgeInsets.all(8.w),
              child: Text(
                video.title,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 14.sp,
                  fontWeight: FontWeight.w600,
                  fontFamily: GoogleFonts.inter().fontFamily,
                  height: 1.5,
                ),
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 问答弹幕的骨架屏
  Widget _buildQuestionShimmer() {
    return Padding(
      padding: EdgeInsets.only(top: 15.h),
      child: Column(
        children: [
          // 第一行骨架屏
          SizedBox(
            height: 46.h,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              physics: const NeverScrollableScrollPhysics(),
              itemCount: 3,
              itemBuilder: (context, index) {
                return Padding(
                  padding: EdgeInsets.only(
                    right: 20.w,
                    left: index == 0 ? 20.w : 0,
                  ),
                  child: Shimmer.fromColors(
                    baseColor: const Color(0xFF1E1F31),
                    highlightColor: const Color(0xFF353656),
                    child: Container(
                      width: 296.w,
                      height: 46.h,
                      decoration: ShapeDecoration(
                        color: const Color(0xFF1E1F31),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(40.r),
                        ),
                      ),
                    ),
                  ),
                );
              },
            ),
          ),

          SizedBox(height: 16.h),

          // 第二行骨架屏
          SizedBox(
            height: 46.h,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              physics: const NeverScrollableScrollPhysics(),
              itemCount: 3,
              itemBuilder: (context, index) {
                return Padding(
                  padding: EdgeInsets.only(
                    right: 20.w,
                    left: index == 0 ? 20.w : 0,
                  ),
                  child: Shimmer.fromColors(
                    baseColor: const Color(0xFF1E1F31),
                    highlightColor: const Color(0xFF353656),
                    child: Container(
                      width: 296.w,
                      height: 46.h,
                      decoration: ShapeDecoration(
                        color: const Color(0xFF1E1F31),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(40.r),
                        ),
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  // 视频列表的骨架屏
  Widget _buildVideoShimmer() {
    return GridView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2, // 两列
        childAspectRatio: 183 / 268, // 宽高比
        crossAxisSpacing: 15.w, // 水平间距
        mainAxisSpacing: 15.h, // 垂直间距
      ),
      itemCount: 6, // 显示6个占位
      itemBuilder: (context, index) {
        return Shimmer.fromColors(
          baseColor: const Color(0xFF121325),
          highlightColor: const Color(0xFF292A43),
          child: Container(
            decoration: BoxDecoration(
              color: const Color(0xFF121325),
              borderRadius: BorderRadius.circular(12.r),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 缩略图骨架
                ClipRRect(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(12.r),
                    topRight: Radius.circular(12.r),
                  ),
                  child: Container(
                    width: double.infinity,
                    height: 186.h,
                    color: Colors.white,
                  ),
                ),

                // 标题骨架
                Padding(
                  padding: EdgeInsets.all(8.w),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        width: 120.w,
                        height: 14.h,
                        color: Colors.white,
                      ),
                      SizedBox(height: 8.h),
                      Container(width: 80.w, height: 14.h, color: Colors.white),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}
